<script setup lang="ts">
import { useUserStore } from './stores/user';
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

const userStore = useUserStore();

// Add task related state
const addTaskVisible = ref(false);
const taskForm = reactive({
  title: '',
  description: '',
  priority: 'Medium',
  status: 'Not Started', // Default status: Not Started
  startTime: '',
  endTime: ''
});

// Add task method
const addTask = () => {
  if (!taskForm.title || taskForm.title.trim() === '') {
    ElMessage.warning('Please enter task title');
    return;
  }
  
  // Ensure status is always Not Started
  taskForm.status = 'Not Started';
  
  // Add task submission logic here
  console.log('Adding task:', taskForm);
  
  // Close dialog
  addTaskVisible.value = false;
  
  // Reset form
  resetTaskForm();
};

// Reset form
const resetTaskForm = () => {
  taskForm.title = '';
  taskForm.description = '';
  taskForm.priority = 'Medium';
  taskForm.status = 'Not Started';
  taskForm.startTime = '';
  taskForm.endTime = '';
};
</script>

<template>
  <div id="app" class="app-container">
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>

    <!-- Global Add Task Dialog -->
    <el-dialog
      v-model="addTaskVisible"
      title="Add Task"
      width="50%"
      destroy-on-close
    >
      <el-form :model="taskForm" label-width="100px">
        <el-form-item label="Task Title" prop="title" required>
          <el-input v-model="taskForm.title" placeholder="Enter task title" />
        </el-form-item>
        <el-form-item label="Task Description" prop="description">
          <el-input
            v-model="taskForm.description"
            placeholder="Enter task description"
            type="textarea"
            :rows="4"
          />
        </el-form-item>
        <el-form-item label="Priority" prop="priority">
          <el-select v-model="taskForm.priority" placeholder="Select priority">
            <el-option label="High" value="High" />
            <el-option label="Medium" value="Medium" />
            <el-option label="Low" value="Low" />
          </el-select>
        </el-form-item>
        <!-- Status selector removed, automatically set to Not Started -->
        <el-form-item label="Time Range" prop="timeRange">
          <div style="display: flex; gap: 10px; align-items: center;">
            <el-date-picker
              v-model="taskForm.startTime"
              type="datetime"
              placeholder="Start Time"
              style="width: 100%;"
            />
            <span>to</span>
            <el-date-picker
              v-model="taskForm.endTime"
              type="datetime"
              placeholder="End Time"
              style="width: 100%;"
            />
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addTaskVisible = false">Cancel</el-button>
          <el-button type="primary" @click="addTask">OK</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: fixed;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.page-container {
  padding: 20px;
}

.page-title {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 500;
  color: #333;
}

.card-shadow {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-center {
  text-align: center;
}

.mb-20 {
  margin-bottom: 20px;
}

.mt-20 {
  margin-top: 20px;
}


.wider-select-dropdown {
  min-width: 110px !important;
}

.el-select-dropdown__item {
  padding: 8px 12px !important;
  height: auto !important;
  line-height: 1.5 !important;
}

.el-select-dropdown__item.selected {
  font-weight: bold;
  color: #409eff;
}

.el-select .el-input__inner {
  cursor: pointer;
}

.el-select-dropdown__item.hover {
  background-color: #f5f7fa;
}


.el-form--inline .el-form-item {
  margin-right: 20px;
}

.el-form-item__label {
  font-weight: 500;
}
</style>
